@import './variable.scss';


.font-13 {
	font-size: 13px;
}

.font-12 {
	font-size: 12px;
}

.font-11 {
	font-size: 11px;
}

.text-grey1 {
	color: #888;
}
.text-grey2 {
	color: #aaa;
}

.list-cell-arrow::before {
    content: ' ';
    height: 10px;
    width: 10px;
    border-width: 2px 2px 0 0;
    border-color: #c0c0c0;
    border-style: solid;
    -webkit-transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
    transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
    position: absolute;
    top: 50%;
    margin-top: -6px;
    right: 30rpx;
  }

  .list-cell {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    background-color: #fff;
    color: #333;
    padding: 26rpx 30rpx;
  }

  .list-cell:first-child {
    border-radius: 8rpx 8rpx 0 0;
  }

  .list-cell:last-child {
    border-radius: 0 0 8rpx 8rpx;
  }

  .list-cell::after {
    content: '';
    position: absolute;
    border-bottom: 1px solid #eaeef1;
    -webkit-transform: scaleY(0.5) translateZ(0);
    transform: scaleY(0.5) translateZ(0);
    transform-origin: 0 100%;
    bottom: 0;
    right: 0;
    left: 0;
    pointer-events: none;
  }


  .menu-list {
    margin: 15px 15px;

    .menu-item-box {
      width: 100%;
      display: flex;
      align-items: center;

      .menu-icon {
        color: #007AFF;
        font-size: 16px;
        margin-right: 5px;
      }

      .text-right {
        margin-left: auto;
        margin-right: 34rpx;
        color: #999;
      }
    }
  }

// 公共类
.block-background-color {
  background-color: $block-background-color;
}
.page-background-color {
  background-color: $page-background-color;
}
.text-color {
  color: $text-color;
}
.text-color-secondary {
  color: $text-color-secondary;
}
.placeholder-color {
  color: $placeholder-color;
}
.color-primary {
  color: $primary-color;
}
.bg-primary {
  background-color: $primary-color;
  color: #fff;
}
.bg-button {
  background-color: $button-background-color;
  color: #fff;
}

// 自定义样式
// 宽 单位rpx
@for $i from 1 through 1200 {
  .w-#{$i} { width: $i + rpx; }
  .min-w-#{$i} { min-width: $i + rpx; }
  .max-w-#{$i} { max-width: $i + rpx; }
}
.w-full {
  width: 100%;
}

// 高
@for $i from 1 through 1200 {
  .h-#{$i} { height: $i + rpx; }
  .min-h-#{$i} { min-height: $i + rpx; }
  .max-h-#{$i} { max-height: $i + rpx; }
}
.h-full {
  height: 100%;
}
.min-100vh{
  min-height: 100vh;
}

// 行高
@for $i from 2 through 1200 {
  .lh-#{$i} { line-height: $i + rpx; }
}
.lh-1 {
  line-height: 1;
}
.lh-1_2 {
  line-height: 1.2;
}
.lh-1_3 {
  line-height: 1.3;
}
.lh-1_4 {
  line-height: 1.4;
}
.lh-1_5 {
  line-height: 1.5;
}
.lh-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
// 文本对齐
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}

// display
.block {
  display: block;
}
.inline {
  display: inline;
}
.inline-block {
  display: inline-block;
}

// flex布局
.flex {
  display: flex;
}
.flex-column {
  flex-direction: column;
}
.flex-column-reverse {
  flex-direction: column-reverse;
}
.flex-row {
  flex-direction: row;
}
.flex-row-reverse {
  flex-direction: row-reverse;
}
@for $i from 0 through 5 {
  .flex-#{$i} { flex: $i; }
  .flex#{$i} { flex: $i; }
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}
.flex-nowrap {
  flex-wrap: nowrap;
}
.flex1 {
  flex: 1;
}
.justify-start {
  justify-content: flex-start;
}
.justify-center {
  justify-content: center;
}
.justify-end {
  justify-content: flex-end;
}
.space-between {
  justify-content: space-between;
}
.space-around {
  justify-content: space-around;
}
.space-evenly {
  justify-content: space-evenly;
}
.align-start {
  align-items: flex-start;
}
.align-center {
  align-items: center;
}
.align-end {
  align-items: flex-end;
}
.align-baseline {
  align-items: baseline;
}
.align-stretch {
  align-items: stretch;
}

// 边框border
.border-19BE6B{
  border: 2rpx solid #19BE6B;
}
.border-333333{
  border: 2rpx solid #333333;
}
.border-CCCCCC{
  border: 2rpx solid #CCCCCC;
}
.border-888888{
  border: 2rpx solid #888888;
}
.border-000000{
  border: 2rpx solid #000000;
}
.border-bottom-CCCCCC {
  border-bottom: 2rpx solid #CCCCCC;
}
.border-top-CCCCCC {
  border-top: 2rpx solid #CCCCCC;
}
.border-top-EEEEEE {
  border-top: 2rpx solid #EEEEEE;
}
.border-2D8CF0 {
  border: 2rpx solid #2D8CF0;
}
.border-5-2D8CF0 {
  border: 5rpx solid #2D8CF0;
}
.border-left-CCCCCC {
  border-left: 2rpx solid #CCCCCC;
}
// 圆角border-radius 单位rpx
@for $i from 1 through 400 {
  .br-#{$i} { border-radius: $i + rpx; }
}
.br-round {
  border-radius: 50%;
}

// 字体大小 单位rpx
@for $i from 1 through 50 {
  .fz-#{$i * 2} { font-size: 2 * $i + rpx; }
}

// 字体粗细
@for $i from 1 through 10 {
  .fw-#{$i * 100} { font-weight: 100 * $i; }
}
.font-thin {
  font-weight: 100;
}
.font-normal {
  font-weight: 400;
}
.font-bold {
  font-weight: 700;
}

// 外边距margin
//@for $i from 0 through 200 {
//  .m-#{$i * 2} { margin: 2 * $i + rpx; }
//  .mx-#{$i * 2} { margin-left: 2 * $i + rpx; margin-right: 2 * $i + rpx; }
//  .m-lr-#{$i * 2} { margin-left: 2 * $i + rpx; margin-right: 2 * $i + rpx; }
//  .my-#{$i * 2} { margin-top: 2 * $i + rpx; margin-bottom: 2 * $i + rpx; }
//  .m-tb-#{$i * 2} { margin-top: 2 * $i + rpx; margin-bottom: 2 * $i + rpx; }
//  .mt-#{$i * 2} { margin-top: 2 * $i + rpx; }
//  .mb-#{$i * 2} { margin-bottom: 2 * $i + rpx; }
//  .ml-#{$i * 2} { margin-left: 2 * $i + rpx; }
//  .mr-#{$i * 2} { margin-right: 2 * $i + rpx; }
//}
@for $i from 0 through 400 {
  .m-#{$i} { margin: $i + rpx; }
  .mx-#{$i} { margin-left: $i + rpx; margin-right: $i + rpx; }
  .m-lr-#{$i} { margin-left: $i + rpx; margin-right: $i + rpx; }
  .my-#{$i} { margin-top: $i + rpx; margin-bottom: $i + rpx; }
  .m-tb-#{$i} { margin-top: $i + rpx; margin-bottom: $i + rpx; }
  .mt-#{$i} { margin-top: $i + rpx; }
  .mb-#{$i} { margin-bottom: $i + rpx; }
  .ml-#{$i} { margin-left: $i + rpx; }
  .mr-#{$i} { margin-right: $i + rpx; }
}

.margin-auto{
  margin: auto;
}
.margin-0-auto{
  margin: 0 auto;
}
// 内边距padding
//@for $i from 0 through 200 {
//  .p-#{$i * 2} { padding: 2 * $i + rpx; }
//  .px-#{$i * 2} { padding-left: 2 * $i + rpx; padding-right: 2 * $i + rpx; }
//  .p-lr-#{$i * 2} { padding-left: 2 * $i + rpx; padding-right: 2 * $i + rpx; }
//  .py-#{$i * 2} { padding-top: 2 * $i + rpx; padding-bottom: 2 * $i + rpx; }
//  .p-tb-#{$i * 2} { padding-top: 2 * $i + rpx; padding-bottom: 2 * $i + rpx; }
//  .pt-#{$i * 2} { padding-top: 2 * $i + rpx; }
//  .pb-#{$i * 2} { padding-bottom: 2 * $i + rpx; }
//  .pl-#{$i * 2} { padding-left: 2 * $i + rpx; }
//  .pr-#{$i * 2} { padding-right: 2 * $i + rpx; }
//}
@for $i from 0 through 400 {
  .p-#{$i} { padding: $i + rpx; }
  .px-#{$i} { padding-left: $i + rpx; padding-right: $i + rpx; }
  .p-lr-#{$i} { padding-left: $i + rpx; padding-right: $i + rpx; }
  .py-#{$i } { padding-top: $i + rpx; padding-bottom: $i + rpx; }
  .p-tb-#{$i} { padding-top: $i + rpx; padding-bottom: $i + rpx; }
  .pt-#{$i} { padding-top: $i + rpx; }
  .pb-#{$i} { padding-bottom: $i + rpx; }
  .pl-#{$i} { padding-left: $i + rpx; }
  .pr-#{$i} { padding-right: $i + rpx; }
}
// 堆叠顺序
@for $i from 0 through 100 {
  .z-#{$i} {z-index: $i;}
}
.z-101 {
  z-index: 101;
}
.z-999 {
  z-index: 999;
}
.z-1000 {
  z-index: 1000;
}
.z-1001 {
  z-index: 1001;
}
.z-9999 {
  z-index: 9999;
}
.z-10000 {
  z-index: 10000;
}

// 定位position
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.margin-auto{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.bottom0{
  bottom: 0;
}
.safe-bottom-0 {
  bottom: calc(0rpx + env(safe-area-inset-bottom));
}
.top0{
  top: 0;
}
.top-99999{
  top: -99999rpx;
}
// 单位rpx
@for $i from 0 through 200 {
  .left-#{$i * 2} { left: 2 * $i + rpx; }
  .right-#{$i * 2} { right: 2 * $i + rpx; }
  .top-#{$i * 2} { top: 2 * $i + rpx; }
  .bottom-#{$i * 2} { bottom: 2 * $i + rpx; }
}

// 容器宽高的计算方式
.border-box {
  box-sizing: border-box;
}
.content-box {
  box-sizing: content-box;
}

// 文本溢出
.text-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
// 文本两行超出省略
.text-ellipsis-2{
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 这里是超出几行省略 */
  overflow: hidden;
}

.break-all{
  word-break: break-all;
}

.nowrap {
  white-space: nowrap;
}

// 元素可见性
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}

// 颜色
.color-000000{
  color: #000000;
}
.color-fff{
  color: #FFFFFF;
}
.color-2D8CF0{
  color: #2D8CF0;
}
.color-888888{
  color: #888888;
}
.color-19BE6B{
  color: #19BE6B;
}
.color-FF6262{
  color: #FF6262;
}
.color-333333{
  color: #333333;
}
.color-CCCCCC{
  color: #CCCCCC;
}
// 背景色
.bg-00000060{
  background-color: #00000060;
}
.bg-000{
  background-color: #000000;
}
.bg-19BE6B{
  background-color: #19BE6B;
}
.bg-FF6262{
  background-color: #FF6262;
}
.bg-2D8CF0{
  background-color: #2D8CF0;
}
.bg-fff{
  background-color: #ffffff;
}
.bg-CCCCCC{
  background-color: #CCCCCC;
}
.bg-FF9900{
  background-color: #FF9900;
}
.bg-9CE0FF{
  background-color: #9CE0FF;
}
.bg-EEEEEE{
  background-color: #EEEEEE;
}
.bg-2DB7F5{
  background-color: #2DB7F5;
}
.bg-E9F8FF{
  background-color: #E9F8FF;
}
.bg-BEBEBE{
  background-color: #BEBEBE;
}
.bg-f4f7f4{
  background-color: #f4f7f4
}
.bg-trans {
  background-color: transparent;
}
/* 添加新的公共类 */

.dy-mask {
  position: fixed;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 33;
  top: 0;
  left: 0;
}
.dy-invisble-mask {
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 9;
  top: 0;
  left: 0;
}

// 阴影
.box-shadow {
  box-shadow: 0px 1px 9px 0px #CCC;
}
//.box-shadow {
//  box-shadow: 0px 0px 5px rgb(0 0 0 / 20%);
//}

// 透明度
.opacity-0 {
  opacity: 0;
}
.opacity-10 {
  opacity: .1;
}
.opacity-20 {
  opacity: .2;
}
.opacity-30 {
  opacity: .3;
}
.opacity-40 {
  opacity: .4;
}
.opacity-50 {
  opacity: .5;
}
.opacity-60 {
  opacity: .6;
}
.opacity-70 {
  opacity: .7;
}
.opacity-80 {
  opacity: .8;
}
.opacity-90 {
  opacity: .9;
}
.opacity-100 {
  opacity: 1;
}

// 浮动
.f-r {
  float: right;
}
.f-l {
  float: left;
}
.clearfix {
  clear: both;
}

// 其他

.oh {
  overflow: hidden;
}
.oys{
  overflow-y: scroll;
  overflow-x: hidden;
}
